<!--现场风险评估2-->
<template>
  <div class="page">
    <div class="top-search">
      <div class="top-search-item">
        <el-button type="primary">新建评估</el-button>
      </div>
      <div class="top-search-item">
        <el-button type="danger">删除评估</el-button>
      </div>
      <div class="top-search-item">
        <el-button type="primary">评估估算</el-button>
      </div>
      <div class="top-search-item">
        <el-button type="success">保存</el-button>
      </div>
      <div class="top-search-item">
        <el-button type="primary">导出数据</el-button>
      </div>
      <div class="top-search-item">
        <el-button type="primary">查看风险点可视化图</el-button>
      </div>
      <div class="top-search-item">
        <el-input placeholder="请输入评估名称关键字" />
      </div>
      <div class="top-search-item">
        <el-button type="primary">检索</el-button>
      </div>
    </div>
    <div class="content">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          label="序号"
          align="center"
        />
        <el-table-column
          label="评估名称"
          align="center"
        />
        <el-table-column
          label="评估模型"
          align="center"
        />
        <el-table-column
          label="企业名称"
          align="center"
        />
        <el-table-column
          label="责任人"
          align="center"
        />
        <el-table-column
          label="联系电话"
          align="center"
        />
        <el-table-column
          label="评估时间"
          align="center"
        />
        <el-table-column
          label="评估结果"
          align="center"
        />
        <el-table-column
          label="重大风险"
          align="center"
        />
        <el-table-column
          label="较大风险"
          align="center"
        />
        <el-table-column
          label="一般风险"
          align="center"
        />
        <el-table-column
          label="低风险"
          align="center"
        />
        <el-table-column
          label="备注"
          align="center"
        />
      </el-table>
    </div>
    <div class="bottom-content">
      <div class="bottom-content-left">
        <div class="bottom-content-left-top">
          <el-button type="primary">选择评估专家</el-button>
          <el-button type="danger">移出评估专家</el-button>
        </div>
        <div>
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              label="序号"
              align="center"
            />
            <el-table-column
              label="评估专家"
              align="center"
            />
            <el-table-column
              label="评估结果"
              align="center"
            />
          </el-table>
        </div>
      </div>
      <div class="bottom-content-right">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="风险点清单" name="first">
            <div class="bottom-content-right-bottom">
              <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column
                  type="selection"
                  width="55"
                />
                <el-table-column
                  label="区域序号"
                  align="center"
                />
                <el-table-column
                  label="所属区域/车间"
                  align="center"
                  width="120"
                />
                <el-table-column
                  label="设备序号"
                  align="center"
                />
                <el-table-column
                  label="设备名称"
                  align="center"
                />
                <el-table-column
                  label="风险辨识/标准"
                  align="center"
                  width="120"
                />
                <el-table-column
                  label="风险等级"
                  align="center"
                />
                <el-table-column
                  label="可能导致事故类型"
                  align="center"
                  width="140"
                />
                <el-table-column
                  label="现有控制措施"
                  align="center"
                >
                  <el-table-column
                    label="工程技术"
                    align="center"
                  />
                  <el-table-column
                    label="管理措施"
                    align="center"
                  />
                  <el-table-column
                    label="培训教育"
                    align="center"
                  />
                  <el-table-column
                    label="个体防护"
                    align="center"
                  />
                  <el-table-column
                    label="应急处置"
                    align="center"
                  />
                </el-table-column>
                <el-table-column
                  label="责任部门"
                  align="center"
                />
                <el-table-column
                  label="责任人"
                  align="center"
                />
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="隐患排查清单" name="second">
            <div class="bottom-content-right-bottom">
              <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column
                  type="selection"
                  width="55"
                />
                <el-table-column
                  label="区域序号"
                  align="center"
                />
                <el-table-column
                  label="所属区域/车间"
                  align="center"
                  width="120"
                />
                <el-table-column
                  label="设备序号"
                  align="center"
                />
                <el-table-column
                  label="设备名称"
                  align="center"
                />
                <el-table-column
                  label="隐患描述(附照片)"
                  align="center"
                  width="140"
                />
                <el-table-column
                  label="隐患等级"
                  align="center"
                />
                <el-table-column
                  label="整改依据"
                  align="center"
                />
                <el-table-column
                  label="整改措施"
                  align="center"
                />
                <el-table-column
                  label="整改责任人"
                  align="center"
                />
                <el-table-column
                  label="整改时限"
                  align="center"
                />
                <el-table-column
                  label="整改完成时间"
                  align="center"
                  width="140"
                />
                <el-table-column
                  label="复查情况(附照片)"
                  align="center"
                  width="140"
                />
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      activeName: 'first',
      tableData1: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 树形数据懒加载
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([
        ])
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  padding: 1rem;

  .top-search {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;

    .top-search-item {
      margin-right: 1rem;
    }
  }

  .content {
    margin-top: 2rem;
    width: 100%;
    height: 20rem;
  }
  .bottom-content {
    margin-top: 2rem;
    width: 100%;
    height: 22rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    .bottom-content-left {
      width: 20%;
      height: 22rem;
      padding-right: .5rem;
      .bottom-content-left-top {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: 1rem 0;
      }
    }
    .bottom-content-right {
      border-left: 1px dashed #E4E7ED;
      width: 80%;
      height: 22rem;
      padding: 0 .5rem;
      .bottom-content-right-top {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        .bottom-content-right-top-item {
          margin-right: 1rem;
        }
      }
      .bottom-content-right-bottom {
        margin-top: 1rem;
      }
    }
  }
}

</style>
